<template>
  <div class="order-wrap" v-loading="loading">
    <div class="order-wrap-effect">我的钱包 > 订单明细</div>
     <div class="order-wrap-detail">
        <div class="order-status-wrap">
          <div class="select-detail">
            <div class="select-time">
              <div class="time-left">
                <p class="time-left-txt">下单时间: </p>
                <div class="time-box">
                  <div class="time-select">
                    <el-date-picker
                      v-model="param.startTime"
                      :picker-options="startTimeLimit"
                      class="time-style"
                      type="date"
                      size="small"
                      value-format="yyyy-MM-dd"
                      placeholder="开始日期"
                    >
                    </el-date-picker>
                  </div>
                  <p>-</p>
                  <div class="time-select">
                    <el-date-picker
                      v-model="param.endTime"
                      :picker-options="endTimeLimit"
                      type="date"
                      class="time-style"
                      size="small"
                      value-format="yyyy-MM-dd"
                      placeholder="结束日期"
                      >
                    </el-date-picker>
                  </div>
                </div>
              </div>
            </div>
            <div class="order-right">
              <div class="order-status">订单状态:</div>
              <div class="order-all">
                <el-select 
                v-model="value"
                placeholder="全部"  
                popper-class="select-popper"
                @change="getStatus($event)"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
        <div class="order-wrap-code">
          <div class="order-brief">
            <div class="order-text-r">
              <div>订单号:</div>
            </div>   
            <input v-model="param.orderId" type="text" placeholder="请输入订单号">
          </div>
          <el-button 
            class="order-wrap-query" 
            type="primary" 
            plain
            @click="getOrderData"
            >查找订单
          </el-button>
        </div>
    </div>
    <div class="data-wrap">
      <div class="data-wrap-detail">
      <p class="data-wrap-show">数据明细</p>
        <el-button 
          class="data-wrap-export" 
          type="primary" 
          @click= "exportData()"
          >导出数据
        </el-button>
      </div>
      <div class="table-box">
        <el-table
          :data="tableData"
          border  
          :header-cell-style="titleStyleA"
          :cell-style="titleStyle"
          style="width: 100%">
          <el-table-column
            prop="itemName"
            label="商品名称"
          >
          </el-table-column>
          <el-table-column
            prop="orderId"
            label="订单号"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="订单状态"  
          >
          </el-table-column>
          <el-table-column
            prop="orderTime"
            label="下单时间"
          >
          </el-table-column>
          <el-table-column
            prop="commissionRate"
            label="佣金比例"
          >
          </el-table-column>
          <el-table-column
            prop="commission"
            label="预估费用 (元)"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="pagination"  v-show = "total > 0">
      <el-pagination
        background
        :current-page = "param.pageNum"
        @current-change="changeCurrentPage"
        :page-sizes="[8,16,24]"
        @size-change="changeCurrentPageSize"
        :total = "total"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
      <div class="pageSearch" @click="pageSearch">确定</div>
    </div>
  </div>
</template>
<script>
export default {
  async fetch({store}) {
    await store.commit('setWalletIndex', 1)
    await store.commit('setWalletTwoIndex', 1)
  },
  layout: 'internalouts',
   data() {
    return {
      param : {
        startTime: null || this.$route.query.time, //有query就取query值 开始时间和结束时间是一样的
        endTime:null || this.$route.query.time, //有query就取query值  开始时间和结束时间是一样的
        orderId:null,
        orderStatus:null,
        pageNum:1,
        pageSize:8,
      },
      total:0, //总条数
      loading:false, //页面加载效果
      startTimeLimit:{
      disabledDate:(time) =>{
        if(this.param.endTime){ 
          return time.getTime() > new Date(this.param.endTime).getTime();
        }
      },
    },
     endTimeLimit:{
      disabledDate:(time) =>{
        if (this.param.startTime) {
          return time.getTime() < new Date(this.param.startTime).getTime() - 1 * 24 * 60 * 60 * 1000
        }
      }
    },
     test:'',//弹窗弹出设置
     tableData: [
       {
        itemName:'商品信息',
        orderNum:'订单号',
        orderStatus:'订单状态',
        orderTime:'下单时间',
        commission:'佣金',
        estimate:'预估费用',
       }
     ],
      name:'',//查询订单明细测试使用的name ,单独写
      loading:false,
      options: [{//下拉菜单选项
        id: '0',
        label: '未知状态' 
        }, {
        id: '10',
        label: '待付款'
        }, {
        id: '30',
        label: '已付款'
        }, {
        id: '40',
        label: '已发货'
        }, {
        id: '50',
        label: '已签收'
        },{
        id: '70',
        label: '订单成功'
        },{
        id: '80',
        label: '订单失败'
        }
      ],
      flag:false, //控制查询的状态
      value:'',
    }
  },
  watch:{
   'param.orderId'(newValue){
      this.param.orderId = newValue.replace(/\D/g,'')
    },
  },
  methods:{
    changeCurrentPage(page){ //改变当前页数
      this.param.pageNum = page; //赋值给当前页
      this.getOrderData(); //调用列表接口
      this.$scrollTo();
    },
    changeCurrentPageSize(pageSize){ //改变条数
      this.param.pageNum = 1; //重新请求第一页
      this.param.pageSize = pageSize;  //设置条数
      this.getOrderData();//调用列表接口
      this.$scrollTo();
    },
    pageSearch(){ //点击确定按钮时候调用分页事件
      this.getOrderData(); //调用列表接口
      this.$scrollTo();
		},
    titleStyleA({row, rowIndex}) {
      return 'text-align:center;background:#FAFAFA'
    },
    titleStyle({row,rowIndex}){
      return 'text-align:center'
    },
    getStatus(id){
      this.param.orderStatus = id; //拿到状态的id
    },
    getOrderData(){  
      this.loading = true;
      this.$axios.$post('orderReport',this.param).then(res => {
        this.loading = false;
        if(res.status === 200 ){
          this.tableData = res.obj.list;
          this.total = res.obj.total;
        }else{
          this.$message.warning(res.msg);
         }
      })
      .catch(error => {
        this.$message.warning('请求失败');
        this.loading = false;
      })
    },
    exportData(){ //导出数据
      // if(!this.param.startTime || !this.param.endTime || !this.param.orderStatus || !this.param.orderId) return;
      this.orderExport()
    },
    orderExport(){  
      this.loading = true;
      this.$axios.$post('orderExport',this.param).then(res => {
        this.loading = false;
        if(res.status === 200 ){
           let linkHref = res.obj;
           window.location.href = linkHref; //成功后,下载
        }else{
          this.$message.warning(res.msg);
         }
      })
      .catch(error => {
        this.$message.warning('请求失败');
        this.loading = false;
      })
    },
  },
  created(){
       
  },
  mounted(){
    this.getOrderData(); //页面加载完成进行调用
  }
}
</script>
<style scoped>
  .order-wrap-detail{
    padding:22px;
    background: #fff;
  }
  .order-wrap-effect{
    height:50px;
    line-height: 50px;
    color:#999999;
    font-size: 14px;
  }
  .order-wrap-code{
    display:flex;
    width:530px;
    justify-content: space-between;
    align-items: center;
    color:#d0c1c1;
  }
  .select-detail{
    width: 600px;
    display:flex;
    justify-content: space-between;
    color:#666666;
  }
  .order-right{
    display:flex;
    justify-content: space-between;
    align-items: center;
    width:220px;
    color:#666666;
    font-size: 14px;
    padding-bottom:20px;
    box-sizing: border-box;
  }
  .el-select{
    width:120px;
  }
  .el-button{
    padding:8px 14px 8px 24px;
  }
  .select-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding:0;
  }
  .select-time .time-right {
    width: 100px;
    height: 30px;
    background: #0096e6;
    color: #fff;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    border-radius: 100px;
    cursor: pointer;
  }
  .time-box {
    display: flex;
    align-items: center;
    text-align: center;
  }
  .time-box p {
    width: 30px;
  }
  .time-box {
    display: flex;
    align-items: center;
  }
  .time-style {
    width: 140px;
  }
  .time-left {
    display: flex;
    align-items: center;
  }
  .time-left-txt {
    font-size: 14px;
    color: #666;
    margin-right: 14px;
  }
  .order-brief{
    display:flex;
    width:379px;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
  }
  .order-text-r{
    width:60px;
    text-align:right;
    color:#666666;
  }
  .order-brief>input{
    display:inline-block;
    width: 306px;
    height: 34px;
    border:1px solid #ebebeb;
    border-radius:4px;
    text-indent:22px; 
    box-sizing: border-box;
  }
  .order-brief>input:focus{
    border:1px solid #0096e6;
  }
  .order-wrap-query,.data-wrap-export{
    font-size: 14px;
    background-color: #0096e6;
    color:#fff;
    border-radius:15px;
    padding:8px 22px;
    box-sizing: border-box;
    outline: none;
    border: none;
    cursor: pointer;
  }
  .order-wrap-query:hover,.data-wrap-export:hover{
    background:#66B1FF; 
  }
  .data-wrap {
    margin-top: 10px;
    background: #fff;
    padding: 0 52px 47px;
  }
  .data-wrap-detail {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 14px;
  }
  .data-wrap-show {
    height: 27px;
    color: #0096e6;
    border-bottom: 1px solid #0096e6;
    margin-left: -27px;
  }
  .pagination .pageSearch:hover{
    background:#66B1FF;
  }
  /* 分页样式 */
  .pagination{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    margin:20px 0 50px 0;
  }
  .pagination .pageSearch{
    width:60px;
    height:28px;
    line-height:28px;
    text-align:center;
    border-radius:15px;
    background:#0096e6;
    color:#ffffff;
    font-size:14px;
    cursor:pointer;
    margin-left:10px;
    user-select:none;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color:#0096e6;
  }
  /* 暂无数据960px的 */
  .no-wrap{
    width:960px;
    height:40px;
    line-height:40px;
    text-align:center;
    background:#ffffff;
    font-weight:bold;
    letter-spacing:2px;
    color:#666666;
    font-size:18px;
    border-radius:4px;
    box-shadow:0 0 6px #c2c2c2;
    margin:0 0 20px 0;
  }
  input::-webkit-input-placeholder{
		color:#C0C4CC;
	}
	input::-moz-input-placeholder{
		color:#C0C4CC;
	}
	input:-ms-input-placeholder{
		color:#C0C4CC;
	}
  /* 修改elementUI设置的样式 */
  .table-box /deep/ .el-table .cell{
    word-break: normal;
  }
  .table-box .el-tableel-table_1_column_1 /deep/ .cell{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .el-input__inner {
    width: 120px
  }
  .el-date-editor.el-input {
    width: 120px;
  }
  .el-input--small .el-input__inner{
    height:34px !important;
  }
  /deep/ .el-input__inner{
    height:30px;
  }
  /deep/ .el-input__suffix{
    right:10px;
  }
   /deep/ .el-icon-date::before{
    content:''
  }
  /deep/ .el-select .el-input .el-input__inner{
    height:30px;
    line-height:30px
  }
  /deep/ .el-select .el-input .el-input__icon{
    line-height:30px;
  }
</style>
